<template>
  <div>
    <div>
      <el-row>
        <span>
          现在一共有
          {{ totalNumber.total_pics }}
          张图片，其中展示
          {{ totalNumber.total_showed_pics }}
          张，精选{{ totalNumber.total_chosen_pics }}张。
        </span>
      </el-row>
      <div>
        <el-dialog v-model="dialogVisualFlag" @close="closeDialog">
          <h3>ID:{{ selectImgID }}</h3>
          <el-row>
            <el-button @click="praiseFromID">👍👍{{ praiseNumber }}</el-button>
            <el-button @click="deactivateFromID" type="danger">🚫</el-button>
            <el-button @click="starPicFromID" type="success">✨</el-button>
            <el-button @click="gotoSingleImage">🔍</el-button>
          </el-row>
        </el-dialog>
      </div>

      <el-row>
        <div v-for="info in imgInfo.infoList" :key="info.id">
          <el-image :src="info.url" @click="clickImgHandler(info.id)"></el-image>
        </div>
      </el-row>
      <el-row>
        <el-pagination :page-size="numberPerPage" :pager-count="6" background small layout="prev, pager, next"
          :total="totalNumber.total_showed_pics" v-model:current-page="currentPage" />
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, ref, watch } from "vue";
import {
  getTotalPicsNumber,
  getPagePicsInfos,
  getPraiseNumberByIDApi,
  choosePicByID,
  praiseImageByID,
  deactivateImageByID,
} from "@/api";
import { ImageReturnInfo } from "@/types";
import SingleImageHolder from "../components/SingleImageHolder.vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "PaginationHolder",
  components: { SingleImageHolder },
  setup() {
    const imgInfo = reactive({
      infoList: new Array<ImageReturnInfo>(),
    });

    const numberPerPage = ref<number>(12);
    const currentPage = ref<number>(1);
    const totalNumber = reactive({
      total_pics: 0,
      total_showed_pics: 0,
      total_chosen_pics: 0,
    });

    const dialogVisualFlag = ref(false);
    const selectImgID = ref(0);
    const praiseNumber = ref(0);
    const clickImgHandler = (id: number) => {
      dialogVisualFlag.value = true;
      selectImgID.value = id;
      getPraiseNumberByIDApi(selectImgID.value).then((res) => {
        praiseNumber.value = res.data;
      });
    };
    const router = useRouter();

    const starPicFromID = () => {
      choosePicByID(selectImgID.value).then((res) => {
        console.log(res.data);
        ElMessage({
          message: "选得好哇!!!",
          type: "success",
        });
      });
    };

    const praiseFromID = () => {
      praiseImageByID(selectImgID.value).then((res) => {
        praiseNumber.value = res.data;
        ElMessage({
          message: "瑟瑟之力!!!",
          type: "success",
        });
      });
    };
    const deactivateFromID = () => {
      deactivateImageByID(selectImgID.value).then((res) => {
        console.log(res.data);
        dialogVisualFlag.value = false;
        //关闭对话框
        ElMessage({
          message: "吵到我的眼睛了!",
          type: "warning",
        });
      });
    };
    const getPraiseNumberByID = () => {
      getPraiseNumberByIDApi(selectImgID.value).then((res) => {
        praiseNumber.value = res.data;
      });
    };

    const gotoSingleImage = () => {
      router.push(`/pic/${selectImgID.value}`);
    };

    /**
     * 关闭对话框，清理数据。
     */
    const closeDialog = () => {
      selectImgID.value = 0;
      praiseNumber.value = 0;
    };

    onBeforeMount(() => {
      getTotalPicsNumber().then((res) => {
        totalNumber.total_pics = res.data.total_pics;
        totalNumber.total_showed_pics = res.data.total_showed_pics;
        totalNumber.total_chosen_pics = res.data.total_chosen_pics;
      });
      getPagePicsInfos(currentPage.value).then((res) => {
        imgInfo.infoList = res.data.picture_infos;
      });
    });
    watch(
      () => currentPage.value,
      (value) => {
        getPagePicsInfos(value).then((res) => {
          imgInfo.infoList = res.data.picture_infos;
        });
      }
    );
    return {
      totalNumber,
      numberPerPage,
      currentPage,
      imgInfo,
      clickImgHandler,
      starPicFromID,
      praiseFromID,
      deactivateFromID,
      getPraiseNumberByID,
      gotoSingleImage,
      closeDialog,
      dialogVisualFlag,
      selectImgID,
      praiseNumber,
    };
  },
});
</script>

<style scoped></style>
